let lis = document.querySelectorAll('.main .type ul li'),
    details = document.querySelectorAll('.main .type .details');

//左菜单栏鼠标划入划出
[...lis].forEach((item, index) => {
    item.onmouseenter = function () {
        details[index].classList.add('display');
    }
});
[...lis].forEach((item, index) => {
    item.onmouseleave = function () {
        details.forEach((item, index) => {
            item.onmouseenter = function () {
                item.classList.add('display');
            }
            item.onmouseleave = function () {
                item.classList.remove('display');
            }
        });
        details[index].classList.remove('display');
    }
});


//首页轮播图
$(function () {
    let timer,
        max = 0,
        index = 0;
    $.get('./data/banner.json', function (data) {
        max = data.length - 1;
        render(data);
        changeBindDot();
        move();
    });

    function render(data) {
        let ulStr = '',
            dotStr = '';
        data.forEach((item, i) => {
            ulStr += `<li class='${i == 0 ? 'active' : ''}'><img src='${item.pic}'></li>`;
            dotStr += `<span class='${i == 0 ? 'current' : ''}'></span>`;
        });
        $('.banner_box ul').html(ulStr);
        $('.dot_box').html(dotStr);
    }

    function move() {
        timer = setInterval(() => {
            next();
        }, 4000);
    }

    function next() {
        index++;
        if (index > max) {
            index = 0;
        }
        $('.banner_box ul li').eq(index).addClass('active').siblings().removeClass('active');
        $('.dot_box span').eq(index).addClass('current').siblings().removeClass('current');;
    }

    function prev() {
        index--;
        if (index < 0) {
            index = max;
        }
        $('.banner_box ul li').eq(index).addClass('active').siblings().removeClass('active');
        $('.dot_box span').eq(index).addClass('current').siblings().removeClass('current');;
    }
    $('.banner_box').on('mouseenter', function () {
        clearInterval(timer);
    });
    $('.banner_box').on('mouseleave', function () {
        move();
    });
    $('.left_btn').on('click', function () {
        prev();
    });
    $('.right_btn').on('click', function () {
        next();
    });

    function changeBindDot() {
        $('.dot_box span').on('click', function () {
            let n = $(this).index();
            index = n;
            $('.box ul li').eq(index).addClass('active').siblings().removeClass('active');
            $(this).addClass('current').siblings().removeClass('current');
        });
    }
});



//电影  正在热映 和 即将热映
(function () {
    //正在热映
    let li1 = document.querySelector('.maoyan_total ul .li1');
    //即将上映
    let li2 = document.querySelector('.maoyan_total ul .li2');
    let coming = document.querySelector('.maoyan_movie .coming');
    let box = document.querySelector('.coming .box');
    let leftRight = document.querySelector('.coming .left_right');
    let left = document.querySelector('.coming .left_right .left_btn');
    let right = document.querySelector('.coming .left_right .right_btn');
    let index = 0;
    getData();

    function getData() {
        let xhr = new XMLHttpRequest;
        xhr.open('GET', './data/movie1.json');
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4 && xhr.status === 200) {
                let data = JSON.parse(xhr.responseText);
                render(data);
                console.log(data);
            }
        }
        xhr.send();
    }

    function render(ary = []) {
        let movie1 = '',index = 0;
        ary.forEach(item => {
            index++;
            if (index==5) {
                movie1 += `
                <div class="item_box">
                <img src="${item.pic}" class="picc">
                <div class="looking">
                <div class="lookings">
                    <p class="film-count">${item.num}</p><b>人想看</b>
                    <p class="film-name">${item.name}</p>
                    <span class="film-ticket">预售</span>
                </div>
                </div>
            </div>`;
            }else{
                movie1 += `
                <div class="item_box">
                <img src="${item.pic1}" class="picg">
                <img src="${item.pic}" class="picc">
                    <div class="looking">
                    <div class="lookings">
                    <b>观众评</b>&nbsp;
                    <p class="film-score">${item.score}</p>
                    <p class="film-name">${item.name}</p>
                    <span class="film-ticket">购票</span>
                    </div>
                    </div>
                </div>`;
            }   
        });
        box.innerHTML = movie1;
    }

    function next() {
        index++;
        console.log(index);
        if (index == 1) {
            console.log(index);
            box.style.transform = `translateX(${-936 * index}px)`;
            box.style.transition = `all 0.8s`;
            index = 0;
        }
        return;
    }

    function prev() {
        index--;
        console.log(index)
        if (index < 0) {
            console.log(index);
            box.style.transform = `translateX(${0}px)`;
            box.style.transition = `all 0.8s`;
            index = 0;
        }
    }
    left.onclick = function () {
        prev();
    }
    right.onclick = function () {
        next();
    }




    let willing = document.querySelector('.maoyan_movie .willing');
    let willBox = document.querySelector('.willing .box');
    let willLeft = document.querySelector('.willing .left_right .left_btn');
    let willRight = document.querySelector('.willing .left_right .right_btn');
    let num = 0;
    getWillData()

    function getWillData() {
        let xhr = new XMLHttpRequest;
        xhr.open('GET', './data/movie2.json');
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4 && xhr.status === 200) {
                let data = JSON.parse(xhr.responseText);
                willRender(data);
            }
        }
        xhr.send();
    }

    function willRender(ary = []) {
        let movie2 = '';
        ary.forEach(item => {
            movie2 += `
            <div class="item_box">
            <img src="${item.pic}">
            <div class="looking">
                <p class="film-count">${item.num}</p>
                <b>人想看</b>
                <p class="film-name">${item.name}</p>
                <span class="film-ticket">预售</span>
            </div>
        </div>`;
        });
        willBox.innerHTML = movie2;
    }

    function willNext() {
        num++;
        if (num == 1) {
            willBox.style.transform = `translateX(${-1150 * num}px)`;
            willBox.style.transition = `all 0.8s`;
            num = 0;
        }
        return;
    }

    function willPrev() {
        num--;
        if (num < 0) {
            willBox.style.transform = `translateX(${0}px)`;
            willBox.style.transition = `all 0.8s`;
            num = 0;
        }
    }
    willLeft.onclick = function () {
        willPrev();
    }
    willRight.onclick = function () {
        willNext();
    }
    // willing.onmouseleave=function(){
    //     willLeft.style.opacity='1';
    //     willRight.style.opacity='1';
    //  }


    //正在热映
    li1.onmouseenter = function () {
        coming.style.opacity = '1';
        willing.style.opacity = '0';
    }
    li1.onmouseleave = function () {
        coming.style.opacity = '1';
        willing.style.opacity = '0';
    }


    //即将上映
    li2.onmouseenter = function () {
        coming.style.opacity = '0';
        willing.style.opacity = '1';
    }
    li2.onmouseleave = function () {
        coming.style.opacity = '0';
        willing.style.opacity = '1';
    }

})();



//旅馆
(function () {
    //全部旅馆
    let hotelList = document.querySelector('.hotel_list');
    let lis = document.querySelectorAll('.hotel .hotel_total ul li.li');
    let lists = hotelList.querySelectorAll('.fatherList .list1');

    //天津
    let list1 = hotelList.querySelector('.list1');
    getHotelData1();

    function getHotelData1() {
        let xhr = new XMLHttpRequest;
        xhr.open('get', './data/hotelOne.json');
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4 && xhr.status === 200) {
                let data = JSON.parse(xhr.response);
                render(data);
            }
        }
        xhr.send();
    }

    function render(ary = []) {
        let hotelOne = '';
        ary.forEach(item => {
            hotelOne += `
            <div class="item1">
                <div class="item_img">
                    <img class="img1" src="${item.pic}">
                    <img class="img2" src="${item.img}">
                </div>
                <div class="item_title">
                    <h2>${item.title}</h2>
                    <p>整套
                        <span>${item.num}</span>居室·可住
                        <span>${item.person}</span>人|
                        <span>${item.address}</span>
                    </p><br>
                    <span class="money">￥</span>
                    <span class="price">${item.price}</span>
                </div>
            </div>
            `;
        });
        list1.innerHTML = hotelOne;
    }


    //济南
    let list2 = hotelList.querySelector('.list2');
    getHotelData2();

    function getHotelData2() {
        let xhr = new XMLHttpRequest;
        xhr.open('get', './data/hotelTwo.json');
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4 && xhr.status === 200) {
                let data = JSON.parse(xhr.response);
                render2(data);
            }
        }
        xhr.send();
    }

    function render2(ary = []) {
        let hotelTwo = '';
        ary.forEach(item => {
            hotelTwo += `
            <div class="item1">
                <div class="item_img">
                    <img class="img1" src="${item.pic}">
                    <img class="img2" src="${item.img}">
                </div>
                <div class="item_title">
                    <h2>${item.title}</h2>
                    <p>整套
                        <span>${item.num}</span>居室·可住
                        <span>${item.person}</span>人|
                        <span>${item.address}</span>
                    </p><br>
                    <span class="money">￥</span>
                    <span class="price">${item.price}</span>
                </div>
            </div>
            `;
        });
        list2.innerHTML = hotelTwo;
    }


    //大连
    let list3 = hotelList.querySelector('.list3');
    getHotelData3();

    function getHotelData3() {
        let xhr = new XMLHttpRequest;
        xhr.open('get', './data/hotelThree.json');
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4 && xhr.status === 200) {
                let data = JSON.parse(xhr.response);
                render3(data);
            }
        }
        xhr.send();
    }

    function render3(ary = []) {
        let hotelThree = '';
        ary.forEach(item => {
            hotelThree += `
            <div class="item1">
                <div class="item_img">
                    <img class="img1" src="${item.pic}">
                    <img class="img2" src="${item.img}">
                </div>
                <div class="item_title">
                    <h2>${item.title}</h2>
                    <p>整套
                        <span>${item.num}</span>居室·可住
                        <span>${item.person}</span>人|
                        <span>${item.address}</span>
                    </p><br>
                    <span class="money">￥</span>
                    <span class="price">${item.price}</span>
                </div>
            </div>
            `;
        });
        list3.innerHTML = hotelThree;
    }


    //太原
    let list4 = hotelList.querySelector('.list4');
    getHotelData4();

    function getHotelData4() {
        let xhr = new XMLHttpRequest;
        xhr.open('get', './data/hotelFour.json');
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4 && xhr.status === 200) {
                let data = JSON.parse(xhr.response);
                render4(data);
            }
        }
        xhr.send();
    }

    function render4(ary = []) {
        let hotelFour = '';
        ary.forEach(item => {
            hotelFour += `
            <div class="item1">
                <div class="item_img">
                    <img class="img1" src="${item.pic}">
                    <img class="img2" src="${item.img}">
                </div>
                <div class="item_title">
                    <h2>${item.title}</h2>
                    <p>整套
                        <span>${item.num}</span>居室·可住
                        <span>${item.person}</span>人|
                        <span>${item.address}</span>
                    </p><br>
                    <span class="money">￥</span>
                    <span class="price">${item.price}</span>
                </div>
            </div>
            `;
        });
        list4.innerHTML = hotelFour;
    }



    //石家庄
    let list5 = hotelList.querySelector('.list5');
    getHotelData5();

    function getHotelData5() {
        let xhr = new XMLHttpRequest;
        xhr.open('get', './data/hotelFive.json');
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4 && xhr.status === 200) {
                let data = JSON.parse(xhr.response);
                render5(data);
            }
        }
        xhr.send();
    }

    function render5(ary = []) {
        let hotelFive = '';
        ary.forEach(item => {
            hotelFive += `
            <div class="item1">
                <div class="item_img">
                    <img class="img1" src="${item.pic}">
                    <img class="img2" src="${item.img}">
                </div>
                <div class="item_title">
                    <h2>${item.title}</h2>
                    <p>整套
                        <span>${item.num}</span>居室·可住
                        <span>${item.person}</span>人|
                        <span>${item.address}</span>
                    </p><br>
                    <span class="money">￥</span>
                    <span class="price">${item.price}</span>
                </div>
            </div>
            `;
        });
        list5.innerHTML = hotelFive;
    }



    //秦皇岛
    let list6 = hotelList.querySelector('.list6');
    getHotelData6();

    function getHotelData6() {
        let xhr = new XMLHttpRequest;
        xhr.open('get', './data/hotelSix.json');
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4 && xhr.status === 200) {
                let data = JSON.parse(xhr.response);
                render6(data);
            }
        }
        xhr.send();
    }

    function render6(ary = []) {
        let hotelSix = '';
        ary.forEach(item => {
            hotelSix += `
            <div class="item1">
                <div class="item_img">
                    <img class="img1" src="${item.pic}">
                    <img class="img2" src="${item.img}">
                </div>
                <div class="item_title">
                    <h2>${item.title}</h2>
                    <p>整套
                        <span>${item.num}</span>居室·可住
                        <span>${item.person}</span>人|
                        <span>${item.address}</span>
                    </p><br>
                    <span class="money">￥</span>
                    <span class="price">${item.price}</span>
                </div>
            </div>
            `;
        });
        list6.innerHTML = hotelSix;
    }



    //呼和浩特
    let list7 = hotelList.querySelector('.list7');
    getHotelData7();

    function getHotelData7() {
        let xhr = new XMLHttpRequest;
        xhr.open('get', './data/hotelSeven.json');
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4 && xhr.status === 200) {
                let data = JSON.parse(xhr.response);
                render7(data);
            }
        }
        xhr.send();
    }

    function render7(ary = []) {
        let hotelSeven = '';
        ary.forEach(item => {
            hotelSeven += `
            <div class="item1">
                <div class="item_img">
                    <img class="img1" src="${item.pic}">
                    <img class="img2" src="${item.img}">
                </div>
                <div class="item_title">
                    <h2>${item.title}</h2>
                    <p>整套
                        <span>${item.num}</span>居室·可住
                        <span>${item.person}</span>人|
                        <span>${item.address}</span>
                    </p><br>
                    <span class="money">￥</span>
                    <span class="price">${item.price}</span>
                </div>
            </div>
            `;
        });
        list7.innerHTML = hotelSeven;
    }



    //潍坊
    let list8 = hotelList.querySelector('.list8');
    getHotelData8();

    function getHotelData8() {
        let xhr = new XMLHttpRequest;
        xhr.open('get', './data/hotelEight.json');
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4 && xhr.status === 200) {
                let data = JSON.parse(xhr.response);
                render8(data);
            }
        }
        xhr.send();
    }

    function render8(ary = []) {
        let hotelEight = '';
        ary.forEach(item => {
            hotelEight += `
            <div class="item1">
                <div class="item_img">
                    <img class="img1" src="${item.pic}">
                    <img class="img2" src="${item.img}">
                </div>
                <div class="item_title">
                    <h2>${item.title}</h2>
                    <p>整套
                        <span>${item.num}</span>居室·可住
                        <span>${item.person}</span>人|
                        <span>${item.address}</span>
                    </p><br>
                    <span class="money">￥</span>
                    <span class="price">${item.price}</span>
                </div>
            </div>
            `;
        });
        list8.innerHTML = hotelEight;
    }



    //唐山
    let list9 = hotelList.querySelector('.list9');
    getHotelData9();

    function getHotelData9() {
        let xhr = new XMLHttpRequest;
        xhr.open('get', './data/hotelNine.json');
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4 && xhr.status === 200) {
                let data = JSON.parse(xhr.response);
                render9(data);
            }
        }
        xhr.send();
    }

    function render9(ary = []) {
        let hotelNine = '';
        ary.forEach(item => {
            hotelNine += `
            <div class="item1">
                <div class="item_img">
                    <img class="img1" src="${item.pic}">
                    <img class="img2" src="${item.img}">
                </div>
                <div class="item_title">
                    <h2>${item.title}</h2>
                    <p>整套
                        <span>${item.num}</span>居室·可住
                        <span>${item.person}</span>人|
                        <span>${item.address}</span>
                    </p><br>
                    <span class="money">￥</span>
                    <span class="price">${item.price}</span>
                </div>
            </div>
            `;
        });
        list9.innerHTML = hotelNine;
    }



    //泰安
    let list10 = hotelList.querySelector('.list10');
    getHotelData10();

    function getHotelData10() {
        let xhr = new XMLHttpRequest;
        xhr.open('get', './data/hotelTen.json');
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4 && xhr.status === 200) {
                let data = JSON.parse(xhr.response);

                render10(data);
            }
        }
        xhr.send();
    }

    function render10(ary = []) {
        let hotelTen = '';
        ary.forEach(item => {
            hotelTen += `
            <div class="item1">
                <div class="item_img">
                    <img class="img1" src="${item.pic}">
                    <img class="img2" src="${item.img}">
                </div>
                <div class="item_title">
                    <h2>${item.title}</h2>
                    <p>整套
                        <span>${item.num}</span>居室·可住
                        <span>${item.person}</span>人|
                        <span>${item.address}</span>
                    </p><br>
                    <span class="money">￥</span>
                    <span class="price">${item.price}</span>
                </div>
            </div>
            `;
        });
        list10.innerHTML = hotelTen;
    }


    lis.forEach((item, i) => {
        item.onmouseenter = function () {
            lists.forEach(item => {
                item.classList.remove('active');
            });
            lists[i].classList.add('active');
        }
    });
})();


//饭店
(function () {
    let eatList = document.querySelector('.eat_list');
    getEatData();

    function getEatData() {
        let xhr = new XMLHttpRequest;
        xhr.open('get', './data/eat.json');
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4 && xhr.status === 200) {
                let data = JSON.parse(xhr.response);
                console.log(data);
                renderEat(data);
            }
        }
        xhr.send();
    }

    function renderEat(ary) {
        let str = '';
        ary.forEach(item => {
            str += `
            <div class="eat_box">
            <div class="img_box">
                <img src="${item.pic}">
            </div>
            <div class="info_box">
                <h2>${item.title}</h2>
                <ul class="star">
                    <li class="iconfont icon-star-full"></li>
                    <li class="iconfont icon-star-full"></li>
                    <li class="iconfont icon-star-full"></li>
                    <li class="iconfont icon-star-full"></li>
                    <li class="iconfont icon-star-half"></li>   
                </ul> 
                <span class="score">${item.num}个评价</span>
                <p class="address">${item.address}</p>
                <div class="price">
                    ￥<span>${item.price}</span> 起
                </div>
            </div>
        </div>
            `;
        });
        eatList.innerHTML = str;
    }
})();